<template>
	<div class="group-group">
		<van-index-bar :sticky="false" :index-list="indexList">
			<van-index-anchor index="热门" />
			<div class="list">
				<template v-for="(city, index) in groupData.hotCities">
					<div class="city" @click="cityClick(city)">{{ city.cityName }}</div>
				</template>
			</div>

			<template v-for="(group, index) in groupData.cities" :key="index">
				<van-index-anchor :index="group.group" />
				<template v-for="(city, indey) in group.cities" :key="indey">
					<van-cell :title="city.cityName" @click="cityClick(city)" />
				</template>
			</template>
		</van-index-bar>
	</div>
</template>

<script setup>
	import { computed } from 'vue'
	import { useRouter } from 'vue-router'
	import useCityStore from '@/stores/modules/city'
	const router = useRouter()
	const cityStore = useCityStore()
	const props = defineProps({
		groupData: {
			type: Object,
			default: () => ({}),
		},
	})

	const indexList = computed(() => {
		const list = props.groupData.cities.map((item) => item.group)
		list.unshift('#')
		return list
	})

	// 监听城市的点击
	const cityClick = (city) => {
		cityStore.currentCity = city
		router.back()
	}
</script>

<style lang="less" scoped>
	.group-group {
		--van-index-anchor-sticky-text-color: var(--primary-color);
		:deep(.van-index-bar__index) {
			font-weight: normal;
		}
		:deep(.van-index-anchor) {
			color: var(--primary-color);
		}
		.list {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-evenly;
			padding: 10px;
			padding-right: 25px;
			.city {
				width: 70px;
				height: 28px;
				margin: 10px 0;
				border-radius: 14px;
				color: #000;
				background-color: #fff4ec;
				text-align: center;
				line-height: 28px;
			}
		}
	}
</style>
